<!DOCYTYPE html>

<html>

<head>
    <title> SWIMv2 Project - Search and give help </title>
    <meta name="description" content="Social network for helping each others" />
    <meta name="keywords" content="social, network, help, friends, skill, academic, project, politecnico, milano, java, ingegneria, software, engineering" />
    <meta name="author" content="GTD" />
    <link rel="stylesheet" href="main.css" media="all" />
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"> </script>
    <script type="text/javascript" src="scripts/underscore-min.js"> </script>
    <script type="text/javascript" src="scripts/backbone-min.js"> </script>
    <script type="text/javascript">
    $(function() {
        jQuery.fn.fadeReplace = function(replacer) {
            $(this).fadeOut(1000, function() {
                replacer.fadeIn();
            });
        };

        var AppRouter = Backbone.Router.extend({
            routes: {
                "" : "homeRoute",
                "help": "helpRoute",
                "self": "profileRoute"
            }
        });

        var a = new AppRouter();

        a.on('route:helpRoute', function() {
            $(".body div").filter(":visible").fadeReplace($("#searchPanel, #searchPanel *"));
        });

        Backbone.history.start();
    });
    </script>
    <script type="text/javascript">
        $(function() {
            var skillList = $("#skillList ul");
            var skillItems = skillList.find("li");
            var selectedSkillList = $("#selectedSkills");

            $("#skillQuickSearchBox").keyup(function() {
                var query = $(this).val().toString().toLowerCase();

                skillItems.each(function() {
                    var itemText = $(this).text().toLowerCase();

                    if (itemText.indexOf(query) < 0) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            });

            skillItems.click(function() {
                var itemText = $(this).text().trim();
                var exists = false;

                selectedSkillList.find("li").each(function() {
                    if ($(this).text().trim() == itemText) {
                        exists = true;
                    }
                });

                if (exists) {
                    return;
                }

                var newItem = $("<li> <input type='checkbox' name='skill' value='checked' /> <label> " + itemText + " </label>");
                selectedSkillList.append(newItem);
            });
        });
    </script>
</head>

<body>
    <nav id="userBar">
        <div class="bodyAligned barContent">
            <span class="notLoggedIn">
                <span class="textLogo">
                    <a href="#">SWIMv2 Project </a>
                </span>
                <span id="loginBar" class="right">
                    <form id="loginForm" action="#/login" method="GET" class="staticRight">
                        <label>Username:</label> <input type="text" name="username" />
                        <label>Password:</label> <input type="password" name="password" />
                        <input type="submit" value="Login" onclick="" />
                    </form>
                </span>
            </span>
            <span class="loggedIn">
                <span class="textLogo">
                    <a href="#">SWIMv2</a>
                </span>
                <span class="quickIcon">
                    <a href="#/self/feedbacks"> <img src="icons/feedback.png" alt="Feedbacks" /> </a>
                    <label id="feedbackCount"> 0 </label>
                </span>

                <span class="quickIcon">
                    <a href="#/self/messages"> <img src="icons/message.png" alt="Messages" /> </a>
                    <label id="messageCount"> 0 </label>
                </span>

                <span class="quickIcon">
                    <a href="#/self/requests"> <img src="icons/user.png" alt="Friendship requests" /> </a>
                    <label id="requestCount"> 1 </label>
                </span>

                <span id="quickSearch">
                    <form name="quickSearchForm" action="#/help" method="GET">
                        <input type="text" name="skills" value="Quick search" />
                    </form>
                </span>

                <span class="right">
                    <span class="quickIcon">
                        <a href="#"> <img src="icons/home.png" alt="Home" /> </a>
                        <label> Home </label>
                    </span>
                    <span class="quickIcon">
                        <a href="#/logout"> <img src="icons/close.png" alt="Logout" /> </a>
                        <label> Logout </label>
                    </span>
                </span>
            </span>
        </div>
    </nav>
    
    <div class="body">
        <div id="homePanel">
            <article id="introduction">
                <img id="homeImage" class="left" src="logo.jpg" alt="SWIMv2 Image" />

                <header> SWIMv2 </header>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec porttitor risus. In in convallis justo. Donec nec ante eu tortor tempor dignissim nec at urna. Sed pretium elit massa, ut pellentesque lectus. Aenean eget neque et diam feugiat tempus id sit amet eros. Cras dictum posuere nunc, in mollis purus scelerisque non. Ut sapien augue, porta sit amet pretium tincidunt, blandit a lectus. Nunc ac leo ut diam pellentesque eleifend. Nulla ornare vulputate suscipit. Mauris eu nulla et nisl faucibus venenatis. Nullam ac risus leo, sit amet condimentum justo. Praesent in leo elit, et consectetur lacus. Donec commodo dolor vel risus gravida pharetra non eu justo.
            </article>

            <article id="quickStart">
                <form id="registrationForm" action="#/register" method="POST">
                    <header> Register now! It's free! </header>
                    <table>
                        <tr> <td> <label>E-mail: </label>   </td> <td> <input type="email" name="email" />       </td> </tr>
                        <tr> <td> <label>Password: </label> </td> <td> <input type="password" name="password" /> </td>
                        <tr> <td> <label>Confirm password: </label> </td> <td> <input type="password" name="cpassword" /> </td> <td> <input type="submit" value="Register" /> </td> </tr>
                    </table>
                </form>

                <section>
                    <header> <a href="#/help" alt="Search for help">Or seek help now!</a> </header>
                </section>
            </article>
        </div>

        <div id="profilePanel">
            <section id="userHeader">
                <img class="left avatar" src="#/self/avatar">
                <header> Username </header>
                <cite> Personal description </cite>
                <br /> <br />
                Average rating: 3.6
            </section>

            <nav id="userTabs">
                <a href="#/self/informations"> Informations </a>
                <a href="#/self/skills"> Skills </a>
                <a href="#/self/feedbacks"> Feedbacks </a>
            </nav>

            <section id="content">
                <section id="information">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit purus, interdum eget elementum nec, vehicula ac erat. Duis interdum ullamcorper tellus sit amet porttitor. Etiam euismod magna at tellus fringilla iaculis. Donec viverra, orci in tristique aliquam, leo lectus commodo erat, ac porta ante eros ac tortor. Pellentesque metus leo, posuere in hendrerit nec, venenatis et dolor. Nunc vel porttitor sapien. Phasellus non lorem quis lectus interdum rutrum a ut lectus. Ut laoreet bibendum est in posuere.

                    Nunc imperdiet placerat sem ac imperdiet. Praesent rhoncus arcu a justo blandit sollicitudin. Pellentesque accumsan ornare massa, a dictum nisi volutpat at. Integer commodo lobortis mi, rhoncus pellentesque orci posuere sit amet. Aliquam convallis, purus in semper fermentum, libero massa dignissim turpis, sed suscipit augue magna id ante. Maecenas et felis risus. Aenean eu odio dui, sed congue ligula. Nam dignissim sodales ligula a porta. Fusce sodales, dui sit amet hendrerit elementum, orci velit fermentum arcu, ut semper sapien mauris sed nibh. Nam sed augue nec massa mattis blandit. Cras aliquet, arcu vel convallis consequat, mi tellus mattis neque, a ultricies ipsum leo at enim. Integer sed nulla justo, ut sollicitudin massa.

                    Aliquam facilisis ultricies ligula, sit amet congue purus viverra semper. Fusce sagittis purus a ligula congue eu vestibulum justo ullamcorper. Suspendisse lorem tortor, posuere gravida fermentum in, ultrices et lorem. Vivamus at ultrices erat. Donec nunc elit, varius sit amet tincidunt gravida, accumsan eu ante. Vestibulum fermentum sodales dolor, nec suscipit elit condimentum at. Sed blandit vestibulum bibendum. Morbi diam sapien, tristique eget auctor eu, tincidunt ut risus. Ut tristique lacinia sodales. Etiam elementum luctus ante, eu vehicula lectus molestie sit amet. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras convallis turpis quis quam luctus viverra. Curabitur tincidunt diam in sapien mattis nec volutpat mi consequat.
                </section>

                <section id="skills">

                </section>

                <section id="feedbacks">

                </section>
            </section>
        </div>

        <div id="searchPanel">
            <section id="search">
                <p>
                <h3> What kind of help are you looking for? </h3>
                Here you can search for help within our userbase. The list shows a list of topic skills our users can offer. Click an item do add it to the search list. Use the search box above the list
                to thin out the number of results.
                </p>

                <table>
                    <tr>
                        <td>
                            <input type="text" id="skillQuickSearchBox" />
                            <div id="skillList">
                                <ul>
                                </ul>
                            </div>
                        </td>
                        <td>
                            Selected items:
                            <form id="searchForm" action="/help" method="GET">
                                <ul id="selectedSkills">
                                </ul>
                                <div>
                                    <input type="checkbox" name="onlyFriends" /> <label> Only friends </label>
                                    <input type="submit" value="Search" />
                                </div>
                            </form>
                        </td>
                    </tr>
                </table>
            </section>
        </div>
    </div>
</body>

</html>